<template>
    <el-main>
        <el-row :gutter="20">
            <el-card class="box-card" style="min-height: 200px;">
                <div class="row">
                    <el-form :inline="true">
                        <el-form-item>
                            <el-radio-group v-model="resource" size="medium" @change="changeCharts">
                              <el-radio border label="1">最近一周</el-radio>
                              <el-radio border label="2">最近30天</el-radio>
                              <el-radio border label="3">最近6个月</el-radio>
                              <el-radio border label="4">最近一年</el-radio>
                            </el-radio-group>
                          </el-form-item>
                    </el-form>
                </div>
                <div class="row">
                    <charts class="chart" :options="chartOptions"></charts>
                </div>
                <div style="text-align: center;">PV(访问量):{{puvTotal.pv}} UV(访客量):{{puvTotal.uv}}</div>
                <hr/>
            </el-card>
        </el-row>
    </el-main>
</template>
<script>
    export default {
        data() {
            return {
                resource: '1',
                chartType: 'line',
                puvTotal: {
                    pv: 0,
                    uv: 0
                },
                chartOptions: {
                    chart: {
                        type: 'line'
                    },
                    title: {
                        text: 'PV，UV统计'
                    },
                    xAxis: {
                        categories: []
                    },
                    yAxis: {
                        title: {
                            text: ''
                        },
                    },
                    series: []
                },
            }
        },
        created() {
            this.puvCharts()
        },
        methods:{
            changeCharts (label) {
                this.resource = label
                this.puvCharts()
            },
            puvCharts() {
                const _this = this
                const params = {
                    datestep: _this.datestep,
                    type: _this.resource
                }
                _this.axios.post(_this.$API.ZHIHUAPI.puvCharts, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.chartOptions.xAxis.categories = res.data.categories
                            _this.chartOptions.series = res.data.seriesData
                            _this.puvTotal.pv = res.data.PUV.pv
                            _this.puvTotal.uv = res.data.PUV.uv
                        } else {
                            _this.chartOptions.xAxis.categories = []
                            _this.chartOptions.series = []
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.chartOptions.xAxis.categories = []
                        _this.chartOptions.series = []
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.chartOptions.xAxis.categories = []
                    _this.chartOptions.series = []
                })
            }
        }
    }
</script>

<style scoped>
    .chartElem{
        border-bottom:1px solid #0080FF;
    }
    .chartSpit {
        margin-top: 20px;
    }
</style>
